<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <div class="sendMassage">
        <el-tooltip class="item" effect="dark" content="添加新消息" placement="right-start">
          <el-button type="primary" icon="el-icon-plus" circle @click="addMassage()"></el-button>
        </el-tooltip>
      </div>
      <div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item
            v-for="item in AlertList"
            :key="item.AlertsId"
            :title="item.AlertsTitle"
            :name="item.AlertsId"
          >
            <div>{{item.AlertsContent}}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      activeName: "1",
      user: null,
      AlertList: []
    };
  },
  created() {
    this.allAlert();
  },
  mounted() {},
  methods: {
    allAlert() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetAllAlertByToken,
        params: {
          token: this.user.Token
        }
      }).then(res => {
        this.AlertList = res.data.message;
      });
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
}
.right {
  width: 100%;
  background-color: white;
  min-height: 500px;
  margin-left: 10px;
  padding: 0px 20px 0 20px;
}
.right .sendMassage {
  margin: 20px 0px 20px 0px;
  text-align: left;
}
</style>
